<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>proxy</title>
  </head>
  <body></body>
</html>
<script>
  const data = {
    name: 'zhangsan',
    age: 20,
    start: 1,
    end: 5
  }
  // const data = ["a", "b", "c"];
  const proxyData = new Proxy(data, {
    get(
      target, // 被代理对象
      key, // 获取的属性名
      receiver // 代理对象
    ) {
      // 等同于 Object.keys(target) 获取对象自身的可枚举属性
      const ownKeys = Reflect.ownKeys(target) // 获取对象自身的属性
      if (ownKeys.includes(key)) {
        return Reflect.get(target, key, receiver) // 获取属性值
      }
      return undefined
    },
    // 设置属性
    set(target, key, val, receiver) {
      if (val === target[key]) {
        return true // 判重
      }
      const result = Reflect.set(target, key, val, receiver) // 设置属性值
      return result // 是否设置成功
    },
    // 删除属性
    deleteProperty(target, key) {
      return Reflect.deleteProperty(target, key) // 是否删除成功
    },
    has(target, key) {
      return Reflect.has(target, key) // 是否存在该属性
    }
  })

  console.log(2 in proxyData) // true
</script>
